<template>
  <el-main style="padding:30px 30px">
    <the-search-form @searchSubmit="onSearch" @searchReset="onReset" :form-model="searchModel" :loading="loading">
      <el-button @click="handleOptionClick('update')" type="primary">更新数据</el-button>
      <el-button @click="handleOptionClick('export')" type="primary">导出报表</el-button>
    </the-search-form>
    <basic-table
      :table-data="tableData"
      :table-schema="tableSchema"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-total="pageTotal"
      :loading="loading"
      @sizeChange="onSizeChange"
      @pageChange="onPageChange"
      page-position="bottom"
    >
      <template slot="buttons">
        <el-button @click="handleOptionClick('update')" type="primary">更新数据</el-button>
        <el-button @click="handleOptionClick('export')" type="primary">导出报表</el-button>
        <el-button @click="handleOptionClick('config')">配置列表项</el-button>
      </template>
    </basic-table>
  </el-main>
</template>

<script>
import SearchTable from '@/components/BasePage/mixin/SearchTable'
import BasicTable from '@/components/BasePage/TheBaseTable'
import TheSearchForm from '@/components/BasePage/TheSearchForm'

// 引用指向，指针不能修改 使用splice 修改； 或者使用computed 优化
const searchOptions = {
  providerGroups: [],
  providerCodes: [],
}

export default {
  name: 'index',
  mixins: [SearchTable],
  components: {
    TheSearchForm,
    BasicTable,
  },
  data () {
    return {
      tableSchema: [],
      searchModel: [],
      loading: false,
      formQuery: {
        over_stock_num: '',
        over_due_num: '',
      },
    }
  },
  created () {
    let that = this
    this.listModel = [
      { label: '商品ID', prop: 'goods_id', headerTip: '有积压的ID/sku', width: '160',
        render (createElement, scope, item) {
          return [
            <span>{ scope.row.goods_id }</span> ,<br/>,
            scope.row.hasChildren&& <span>
              {scope.row.trace_status == 1 && <span>跟进中</span>}
              {scope.row.trace_status == 1 && <br/>}
              <el-button type="text" onClick={()=>that.changeTraceStatus(scope.row)}>
              {scope.row.trace_status == 1 ? <span>取消跟进</span> : <span>跟进</span>}
                                </el-button>
                            </span>
          ]
        }
      },
      { label: '在架状态', prop: 'is_on_sale', headerTip: '父ID/sku的在架状态，同库存管理' },
      { label: '图片', prop: 'img_url', type: 'img' },
      { label: '操作', fixed: 'right', width: '120', prop: 'operation', headerTip: '添加备注，最多可查询近7天的备注内容',
        render (createElement, scope, item) {
          return scope.row.hasChildren ? <span>
              <el-button onClick={() => that.showAddDialog(scope.row)} type="text">填写跟进进度</el-button>
              <br />
              <el-button onClick={() => that.showTrackResult(scope.row)} type="text">查看跟进记录</el-button>
            </span> : ''
        }
      }
    ]
    this.listModel.forEach(item=>item.align = 'center')
    this.tableSchema = this.listModel
    this.searchModel = [
      {
        type: 'select',
        label: '供应商属性',
        params: 'group_ids',
        props:{
          filterable: true,
          multiple: true,
        },
        on: {
          change: that.getProviders.bind(that)
        },
        payload: {
          options: searchOptions.providerGroups
        }
      },
      {
        type: 'select',
        label: '超期情况',
        params: 'over_due_num',
        payload: {
          options: [{id:'', name:'不限'}, { id: 0, name: '超期大于等于1件' },{id:'10', name:'超期10件以上'},  {id:'20',name: '超期20件以上'},
            {id:'50', name: '超期50件以上'},{ id: '100', name:'超期100件以上'}]
        }
      }
      {
        type: 'input',
        label: '输入查询',
        params: 'goods_id',
        props:{
          placeholder:'请输入父ID/在架ID(多个空格分隔)'
        }
      },
    ]
    this.getList()
    this.getSelectOptions()
  },
  methods: {
    // searchTable over-ride
    getListRequest () {
      return getOverStockReport
    },
    parseResData (resData) {

    },

    // searchForm
    onSearch (formQuery) {
      this.currentPage = 1
      this.formQuery = formQuery
      this.getList()
    },
    onReset (formQuery) {
      this.formQuery = formQuery
    },

    // search button
    handleOptionClick (option) {
      if (option === 'export') {
      }
    },

  }
}
</script>
